<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <meta property="og:url" content="http://share.weberlong.com">
    <meta property="fb:app_id" content="123456">
    <meta property="og:title" content="baidu">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="share.weberlong.com">
    <meta property="og:description" content="兄dei，share Baidu">
    <meta property="og:image" content="https://www.baidu.com/img/bd_logo1.png">
    <meta property="og:image:secure_url" content="https://www.baidu.com/img/bd_logo1.png">

    <meta property="twitter:creator" content="Baidu">
    <meta property="twitter:card" content="兄dei，share Baidu card">
    <meta property="twitter:title" content="Baidu">
    <meta property="twitter:description" content="Ultra-small installation package, ultra-fast start speed">
    <meta property="twitter:image:src" content="https://www.baidu.com/img/bd_logo1.png">

    <meta name="description" content="兄dei，share Baidu">
    <title>share demo</title>
    <style type="text/css">
      *{padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box}a,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,img,li,ol,p,span,table,td,th,ul{margin:0;border:0}img,input{border:none;vertical-align:middle}body{font-family:SF UI Text,Helvetica,Arial,"san-serif";background:#f6f7fb}
      .list{padding:50px 30px 80px}
      .list .list-item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
      .list .list-item .button{display:inline-block;padding:5px 15px;margin-bottom:10px;margin-left:16px;font-weight:400;text-align:center;vertical-align:middle;font-size:14px;line-height:1.5;color:#fff;border-radius:4px;background-color:#108ee9;cursor:pointer}
      .list .list-item .button:hover{color:#fff;background-color:#40a5ed}
      .list .list-item .button:active{color:#f2f2f2;background-color:#0f87dd}
    </style>
  </head>
  <body>
    <div class="list">
      <div class="list-item">
        <div data-share="facebook" data-width="800" data-height="600" data-title="Baidu Share title" data-quote="Baidu Share quote" data-description="Baidu Share lalala" data-hashtag="#Baidu" data-url="https://www.baidu.com" class="button">Facebook</div>
        <div data-share="messenger" data-width="800" data-height="600" data-title="Baidu Share title" data-quote="Baidu Share quote" data-description="Baidu Share lalala" data-hashtag="#Baidu" data-url="https://www.baidu.com" data-redirect="https://www.baidu.com" class="button">Messenger</div>
        <div data-share="twitter" data-width="800" data-height="600" data-title="Baidu Share title" data-hashtags="Baidu" data-via="Baidu share via lalala" data-url="https://www.baidu.com" class="button">Twitter</div>
        <div data-share="whatsapp" data-title="Baidu" data-url="https://www.baidu.com" class="button">Whatsapp</div>
        <div data-share="line" data-title="Baidu" data-url="https://www.baidu.com" class="button">Line</div>
        <div data-share="vk" data-caption="Baidu Share" data-image="https://www.baidu.com/img/bd_logo1.png" data-title="Baidu" data-url="https://www.baidu.com" class="button">VK</div>
        <div data-share="googleplus" data-url="https://www.baidu.com" class="button">Google+</div> <div data-share="linkedin" data-url="https://www.baidu.com" data-title="Baidu Share title" data-summary="Baidu Share summary" class="button">Linkedin</div>
        <div data-share="email" data-title="Baidu" data-url="https://www.baidu.com" data-subject="Baidu share" class="button">Email</div>
        <div data-share="sms" data-title="Baidu share" data-url="https://www.baidu.com" class="button">Message</div>
      </div>
    </div>
    <script src="../share.js" type="text/javascript"></script>
    <script type="text/javascript">
      Share.init()
    </script>
  </body>
</html>
